<template>
  <div class="result-wrapper">
    <div class="song" v-for="(item,index) in yinyueList" :key="'yinyue'+index">
      <div class="name">
        <span class="iconfont icon-play" @click="gotoPlayer(item.id)"></span>
        <a @click.prevent="toCommit(item.id)">{{ item.name }}</a>
        <span v-if="item.mvid != 0" class="iconfont icon-editmedia" @click="toMV(item.mvid)"></span>
      </div>
      <div class="singer">{{item.artists | formateArtists}}</div>
      <div class="album">{{item.album[0]}}</div>
      <div class="time">{{ item.duration |formateDuration}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      yinyueList:[]
    }
  },
  created(){
  // 通过钩子把数据拿过来
  // console.log(this.$route.params.keyword)
  this.getSongList(this.$route.params.keyword)
  },
  watch:{
    // $route.params.key 和 data 中声明的响应式对象是一样的，也可以被 watch 进行监听，根据监听的结果触发对应的操作
    "$route.params.keyword": function(){
        // console.log(newVal, oldVal)
        this.getSongList(this.$route.params.keyword)
    }
  },
  methods:{
    // 发出axios请求数据
    async getSongList(key){
      let res = await this.$axios.get("/search?keywords="+key)
      // console.log(res.data.result.songs)
      this.yinyueList = res.data.result.songs
    },
    gotoPlayer(id){
      this.$router.push("/player/"+id)
    },
    toMV(id){
      this.$router.push("/video/"+id)
    },
    toCommit(id){
      this.$router.push("/comment/"+id)
    }
  },
  // 过滤器
  filters:{
    // 格式化歌唱家列表
    formateArtists(val){
        let names = ""
        val.forEach( item => {
            names += item.name + " | "
        });
        return names.slice(0, names.length - 2)
    },
    // 格式化歌曲时长
    formateDuration(val){
      return parseInt((val/1000)/60) + "分" + parseInt((val/1000)%60) + "秒"
    }
  }
};
</script>

<style scoped>
@import "@/assets/css/results.css";
</style>